<!--
@name:tabTarget
@author:Zhenglei
@date:15:08
@description:tabTarget
@update:2022/8/815:08
-->
<template>
  <div class="pd-20">
    <el-button type="primary"
               @click="handleOption('add',null)">新 增
    </el-button>
    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:suggest="{row,index}">
        <el-button
          v-if="row.suggest"
          type="text"
          @click="handleOption('preview', row)">预览
        </el-button>
        <p v-else>--</p>
      </template>
      <template v-slot:option="{row,index}">
        <el-button type="primary"
                   @click="handleOption('edit', row)">编辑
        </el-button>
        <el-button type="danger"
                   @click="handleOption('del', row)">删除
        </el-button>
      </template>
    </element-table>
    <dialog-target v-if="showDialog" :visible.sync="showDialog" :dataObj="dataObj"/>
    <dialog-preview v-if="showDialogPreView" :visible.sync="showDialogPreView" :content="content"/>

  </div>
</template>

<script>
import ElementTable from "../../../../base/ElementTable";
import dialogHealthmapDisease from "./dialogHealthmapDisease";
import dialogPreView from "./dialogPreView";
import dialogTarget from "./dialogTarget";

export default {
  name: "tabTarget",
  data() {
    return {
      tableData: [],
      loading: false,
      showDialog: false,
      showDialogPreView: false,
      dataObj: {},
      content: '',
      pageTotal: 0,
      pageIndex: 1,
      pageSize: 20,
      columns: [
        {
          label: '指标名称',
          prop: 'indexItemName',
          align: 'center'
        }, {
          label: '结论',
          prop: 'relationName',
          align: 'center',
          formatter: (row, cellValue) => {
            return row.relationName ? row.relationName : '--'
          }
        }, {
          label: '健康建议',
          prop: 'suggest',
          align: 'center',
          isSlot: true
        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleOption(op, index) {
      switch (op) {
        case 'add':
          this.dataObj = {}
          this.showDialog = true
          break;
        case 'edit':
          this.dataObj = index
          this.showDialog = true
          break;
        case 'del':
          this.$confirm('是否确认删除?', '提示', {
            type: 'warning'
          }).then(() => {
            this.post(this.api.healthMap.delSuggest, {
              id: index.id
            }).then((res) => {
              if (res.data.code === '200') {
                this.$message.success('删除成功!');
                this.getList()
              }
            })
          })
          break;
        case 'preview':
          this.content = index.suggest
          this.showDialogPreView = true
          break

      }

    },
    //健康建议指标
    getList() {
      this.loading = true
      this.post(this.api.healthMap.getSuggestList, {
        pageIndex: this.pageIndex - 1,
        pageSize: this.pageSize,
        searchType: 5
      }).then((res) => {
        if (res.data.code === '200') {
          this.loading = false
          this.tableData = res.data.object
          this.pageTotal = res.data.totalNum
        }
      })
    },
    // 分页
    handleChangePage(page) {
      this.pageIndex = page;
      this.getList();
    },
  },
  components: {
    'element-table': ElementTable,
    'dialog-target': dialogTarget,
    'dialog-preview': dialogPreView
  }
}
</script>

<style scoped>

</style>
